<!-- 提货专区确认订单 -->
<template>
	<view>
		<!-- 地址 -->
		<navigator url="/mall/my/address?back=1" class="address-section">
			<view class="order-content">
				<view class="cen">
					<view class="top">
						<image class="addressIcon" src="../static/images/1fsd.png" mode="aspectFit"></image>
						<text class="name">{{addressData.real_name}}</text>
						<text class="mobile">{{addressData.phone}}</text>
					</view>
					<text class="address clamp2">{{addressData.province}} {{addressData.city}}{{addressData.district}}{{addressData.detail}}</text>
				</view>
				<!-- <text class="yticon icon-you"></text> -->
			</view>
		</navigator>
		<view class="goods-section" v-for="(items,index) in cartInfo" :key="index">
			<view class="g-header b-b">
				<!-- <image class="logo" :src="items.seller_info.online_logo"></image> -->
				<text class="name">{{items.seller_info.online_name}}</text>
			</view>
			<!-- 商品列表 -->
			<view class="g-item" v-for="(item,idx) in items.seller_info.goods_list" :key="idx">
				<image v-if="item.productInfo.attrInfo" :src="item.productInfo.attrInfo.image"></image>
				<image v-else :src="item.productInfo.image"></image>
				<view class="right">
					<text class="title clamp2">{{item.productInfo.store_name}}</text>
					<view class="specBox" @tap="item.productInfo.attrInfo&&toggleSpec(item)">
						<!-- 兼容app -->
						<text class="spec">规格</text>
						<view class="specVal">
							<text class="clamp">{{item.productInfo.attrInfo ? item.productInfo.attrInfo.suk||'' : '无'}}</text>
							<text class="yticon icon-you" v-if="item.productInfo.attrInfo"></text>
						</view>
					</view>

					<view class="price-box">
						<text class="price">{{item.productInfo.attrInfo?item.productInfo.attrInfo.price:item.productInfo.price}}</text>
						<uni-number-box class="uni-number-box" :min="0" :isMin="item.cart_num===0" :value="item.cart_num" :cartId="item.id" @eventChange="numberChange($event)"></uni-number-box>
					</view>
				</view>
			</view>
			<view class="yt-list-cell desc-cell">
				<view class="cell">
					<text class="cell-tit clamp">留言</text>
					<input class="desc" type="text" placeholder="请填写留言信息" placeholder-class="placeholder" @input="message($event,index)" />
				</view>
			</view>
		</view>
		<!-- 金额明细 -->
		<view class="yt-list">
			<view class="yt-list-cell">
				<view class="cell">
					<text class="cell-tit clamp">共计提货卡点</text>
					<text class="cell-tip">{{priceGroup.totalPrice||'0.00'}} 点</text>
				</view>
				<view class="label">
					<text class="label-tit" v-if="surplus_card_value > 0">剩余提货卡点{{surplus_card_value||'0.00'}} 点</text>
					<text class="label-tit" v-if="surplus_card_negative > 0">商品多余{{surplus_card_negative||'0.00'}}需现金支付</text>
				</view>
			</view>
			<view class="yt-list-cell b-b">
				<view class="cell">
					<text class="cell-tit clamp">运费 (现金支付)</text>
					<text class="cell-tip">￥ {{priceGroup.storePostage||'0.00'}}</text>
				</view>
			</view>
		</view>
		<view class="cellBox">
			<view class="cell">
				<view class="left">
					<text>余额抵扣</text>
				</view>
				<evan-switch :size="18" active-color="#57BE6A" :disabled="disabled" v-model="yueChecked"></evan-switch>
			</view>
			<view class="cell" style="margin-top: 20rpx;">
				<view class="left">
					<text>余额</text>
					<text>共￥{{now_money}}</text>
					<text v-if="yueChecked">，使用￥{{yueDeduction}}</text>
				</view>
				<view v-if="yueChecked&&now_money != 0" class="right" @tap="!disabled&&yueChange()">
					<text class="change">修改</text>
				</view>
			</view>
			<!-- <view class="label">{{take_product_desc}}</view> -->
		</view>
		<uni-popup ref="yueChange" type="center">
			<view class="box">
				<image @tap="close" src="../../static/images/center/close.png" mode=""></image>
				<view class="title">余额抵扣</view>
				<view class="content">
					<view class="label">
						<text>拥有余额</text>
						<text>{{now_money}}</text>
					</view>
					<view class="inputBox">
						<text>使用余额</text>
						<text>元</text>
						<input type="digit" v-model="yueDeduction" @input="yueChanged" />
					</view>
					<view @tap="close" class="boxbtn">确认</view>
				</view>
			</view>
		</uni-popup>
		<!-- 底部 -->
		<view class="footer">
			<view class="price-content">
				<text class="a">{{needPay}}</text>
				<text class="b">余额已抵扣{{yueDeduction}}元</text>
			</view>
			<text class="submit" @click="clickSubmit">提交订单</text>
		</view>
		<!-- app选择支付方式 -->
		<choosePay ref="choosePay" @confirm="confirm1"></choosePay>
		<!-- 抵扣全部金额输入平台操作密码 -->
		<passkeyborad :show="keyboradShow" @close="keyboradClose" @finish="finished"></passkeyborad>
		<z-modal ref="zmodal" :content="take_product_desc" @confirm="confirm"></z-modal>

		<!-- 规格-模态层弹窗 -->
		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec()">
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content" @click.stop="stopPrevent()">
				<view>
					<view class="a-t">
						<image lazy-load :src="selectDisObj.image"></image>
						<view class="right">
							<text class="price">{{selectDisObj.price}}</text>
							<text class="stock">库存：{{selectDisObj.stock}}件</text>
							<view class="selected" v-if="selectDisObj.suk">
								已选：{{selectDisObj.suk}}
							</view>
						</view>
					</view>
					<view class="a-c">
						<view class="attr-list">
							<block v-for="(items, index) in specList" :key="index">
								<text class="specTitle">{{items.attr_name}}</text>
								<view class="itemBox">
									<view @tap='selectSpec(item,index,idx)' :class="subIndex[index] == idx ?'itemAct':''" class="item" v-for="(item,idx) in items.attr_value"
									 :key="idx">{{item.attr}}</view>
								</view>
							</block>
						</view>
					</view>
					<view class="btn-box">
						<button class="btn" @click="submitSpec">确认</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addressDefault,
		takeOrderConfirm,
		takeOrderCreate,
	} from '@/api/mall.js'
	import {
		checkPassword
	} from "@/api/user.js"
	import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue'
	import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard.vue'
	import evanSwitch from "@/components/evan-switch/evan-switch.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import zModal from '@/components/z-modal/z-modal.vue'
	import utils from "@/common/utils.js"
	import wechat from '@/common/wechat.js'
	import choosePay from '@/components/choosePay/choosePay.vue'
	export default {
		components: {
			uniNumberBox,
			evanSwitch,
			uniPopup,
			passkeyborad,
			zModal,
			choosePay
		},
		data() {
			return {
				cartId: "", //购物车id
				goodsData: {}, //选中的商品
				specClass: 'none', //规格弹窗开关
				selectDisObj: {
					price: 0
				}, //选择的规格对应产品信息
				specList: [], //规格列表
				subIndex: [], //选中规格索引
				selectArr: [], // 选择的规格
				sku: '', //选中的规格索引
				unique: null, //选中规格标识
				maskState: 0, //优惠券面板显示状态
				descList: [], //备注
				addressId: 0,
				addressData: {
					real_name: '',
					phone: '',
					province: '',
					city: '',
					district: '',
					detail: '',
					default: 1,
					id: 0
				},
				cartInfo: [],
				priceGroup: {},
				orderKey: '',
				userInfo: {},
				surplus_card_value: 0,
				surplus_card_negative:0,
				is_first_card: 0,
				provider: "wxpay",
				payType: "weixin",
				take_product_desc: "",
				//余额抵扣
				money: "1000",//共需支付的金额
				disabled: false, //抵扣开关可切换状态
				yueChecked: false, //抵扣开关状态
				yueDeduction: 0, //抵扣金额
				keyboradShow: false, //操作密码键盘
				now_money: 0, //用户余额
			}
		},
		onLoad(option) {
			if (option.addressId) {
				this.addressId = option.addressId
			}
			this.cartId = option.cartId
			this.getInfo()
		},
		computed: {
			needPay() {
				let needPay = (Number(this.money) - Number(this.yueDeduction)).toFixed(2)
				return needPay
			}
		},
		watch: {
			yueChecked: {
				deep: true,
				handler(val, oldval) {
					this.yueCheckeChange();
				}
			}
		},
		methods: {
			async getInfo(cId, suk, cardNum) {
				takeOrderConfirm({
					address_id: this.addressId,
					cartId: this.cartId,
					card_order_id: uni.getStorageSync("card_order_id"),
					cId: cId,
					suk: suk,
					cardNum: cardNum
				}).then(res => {
						this.specClass = 'hide'
						res.data.addressInfo == null ? this.addressData.real_name = '请选择地址' : this.addressData = res.data.addressInfo
						this.addressData.phone = utils.hidden(this.addressData.phone, 3, 4)
						this.cartInfo = res.data.cartInfo;
						this.priceGroup = res.data.priceGroup;
						this.orderKey = res.data.orderKey;
						this.userInfo = res.data.userInfo;
						this.take_product_desc = res.data.take_product_desc;
						this.money = Number(res.data.surplus_card_negative) + Number(this.priceGroup.storePostage)
						this.actuallyPaid = this.money
						this.now_money = res.data.now_money
						this.surplus_card_value = (res.data.surplus_card_value).toFixed(2)
						this.surplus_card_negative = (res.data.surplus_card_negative).toFixed(2)
						this.is_first_card = res.data.is_first_card
						let _this = this
						this.cartInfo.forEach((item, index) => {
							_this.descList.push({
								seller_id: item.seller_info.seller_id,
								desc: ''
							})
						})
				})
			},
			back() {
				uni.navigateBack({

				})
			},
			message(e, index) {
				this.descList[index].desc = e.target.value
			},
			//规格弹窗开关
			toggleSpec(item) {
				if (item) {
					this.goodsData = item
					this.selectDisObj = item.productValue[item.productInfo.attrInfo.suk]
					this.specList = item.productAttr
					this.subIndex = []
					let sukArr = item.productInfo.attrInfo.suk.split(',')
					let _this = this
					this.specList.forEach((items, index) => {
						items.attr_value.forEach((item, ind) => {
							if (sukArr[index] == item.attr) {
								_this.subIndex.push(ind)
							}
						})
					})
				}
				if (this.specClass === 'show') {
					this.specClass = 'hide'
				} else if (this.specClass === 'hide' || this.specClass === 'none') {
					this.specClass = 'show'
				}
			},
			//选择规格
			selectSpec(item, index, idx) {
				if (this.selectArr[index] !== item.attr) {
					this.$set(this.selectArr, index, item.attr)
					this.$set(this.subIndex, index, idx)
					this.sku = String(this.selectArr)
					this.selectDisObj = this.goodsData.productValue[this.sku]
				}
			},
			//提交规格选择
			submitSpec() {
				uni.showLoading({mask:true})
				this.yueChecked = false
				this.getInfo(this.goodsData.id, this.selectDisObj.unique, )
			},
			//更改数量
			numberChange(e, index, idx) {
				this.yueChecked = false
				this.getInfo(e.cartId, "", e.number);
			},
			// 打开修改余额抵扣面板
			yueChange() {
				this.$refs.yueChange.open()
			},
			// 修改抵扣余额
			yueChanged() {
				let _this = this
				this.$nextTick(function() {
					this.yueDeduction = utils.verifyNum(this.yueDeduction)
				})
				let totalPrice = Number(this.money)
				if (totalPrice > Number(this.now_money)) {
					if (Number(this.yueDeduction) > Number(this.now_money)) {
						this.$nextTick(function() {
							uni.showToast({
								icon: "none",
								title: "不能超过可用余额"
							})
							this.yueDeduction = Number(this.now_money)
						})
					}
				} else {
					if (Number(this.yueDeduction) > totalPrice) {
						this.$nextTick(function() {
							uni.showToast({
								icon: "none",
								title: "不能超过需支付金额"
							})
							this.yueDeduction = totalPrice
						})
					}
				}
			},
			//改变余额抵扣开关
			yueCheckeChange() {
				if (this.yueChecked) {
					if (Number(this.now_money) > Number(this.money)) {
						this.yueDeduction = Number(this.money)
					} else {
						this.yueDeduction = Number(this.now_money)
					}
				} else {
					this.yueDeduction = 0
				}
			},
			close() {
				this.$refs.yueChange.close()
			},
			clickSubmit() {
				if (this.is_first_card == 1) {
					this.$refs.zmodal.show()
				} else {
					this.confirm()
				}
			},
			confirm() {
				if (this.needPay == 0) {
					if (!uni.getStorageSync("userInfo").withdraw_pass) {
						uni.showModal({
							content: "0元支付需设置操作密码",
							confirmText: "去设置",
							cancelText: "取消",
							confirmColor: "#57BE6A",
							success(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: "/pages/center/accountSet/payPassword/payPassword?backurl=true"
									})
								} else if (res.cancel) {}

							}
						})
					} else {
						this.keyboradShow = true
					}
				} else {
					//#ifndef APP-PLUS
					this.submit()
					//#endif
					//#ifdef APP-PLUS
					this.$refs.choosePay.show()
					//#endif
				}
			},

			confirm1(e) {
				this.payType = e.payType
				this.provider = e.provider
				this.submit()
			},
			submit() {
				let data = {
					addressId: this.addressData.id,
					mark: this.descList,
					payType: this.payType,
					// #ifdef MP-WEIXIN
					from: "routine",
					// #endif
					// #ifdef APP-PLUS
					from: "app",
					// #endif
					// #ifdef H5
					from: "weixin",
					// #endif
					card_order_id: uni.getStorageSync("card_order_id"),
					now_money: this.yueDeduction
				}
				uni.showLoading({
					mask:true
				})

				takeOrderCreate(this.orderKey, data).then(res => {
					if (res.data.status == "SUCCESS") {
						uni.hideLoading()
						uni.showToast({
							title: "提货成功"
						})
						setTimeout(function() {
							uni.redirectTo({
								url: `/mall/pickCardMall/pickCardOrder?type=1`
							})
						}, 300);
					} else if (res.data.status == "WECHAT_PAY" || res.data.status == "ALIPAY") {
						// 小程序支付
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.result.jsConfig.timestamp,
							nonceStr: res.data.result.jsConfig.nonceStr,
							package: res.data.result.jsConfig.package,
							signType: res.data.result.jsConfig.signType,
							paySign: res.data.result.jsConfig.paySign,
							complete: function(re) {
								setTimeout(function() {
									uni.hideLoading()
									uni.redirectTo({
										url: `/mall/pickCardMall/pickCardOrder?type=1`
									})
								}, 500);
							}
						});
						// #endif
						// App支付
						// #ifdef APP-PLUS
						uni.requestPayment({
							provider: this.provider,
							orderInfo: res.data.result.jsConfig,
							complete: function(re) {
								setTimeout(function() {
									uni.hideLoading()
									uni.redirectTo({
										url: `/mall/pickCardMall/pickCardOrder?type=1`
									})
								}, 500);
							}
						});
						// #endif
						// h5支付
						//#ifdef H5
						let url = "/mall/pickCardMall/pickCardOrder?type=1"
						wechat.pay(res.data.result.jsConfig, url, true)
						//#endif
					}
				})
			},
			finished(password) {
				uni.showLoading({
					mask:true
				})
				checkPassword({
					password: password
				}, this.keyboradClose()).then(res => {
					this.submit()
				})
			},
			keyboradClose() {
				this.keyboradShow = false
			},
			stopPrevent() {}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
		padding-bottom: 160rpx;
		padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
	}

	.address-section {
		padding: 40rpx 30rpx;
		background: #fff;
		background-image: url(../static/images/1dsfz.png);
		background-repeat: no-repeat;
		background-size: 750rpx 3rpx;
		background-position: 0 bottom;
		position: relative;

		.order-content {
			display: flex;
			align-items: center;
		}

		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28rpx;
			color: #303133;
		}

		.top {
			display: flex;
			align-items: center;

			.addressIcon {
				margin-right: 28rpx;
				width: 33rpx;
				height: 44rpx;
			}
		}

		.name {
			font-size: 32rpx;
			margin-right: 22rpx;
			font-weight: bold;
		}

		.mobile {
			font-size: 32rpx;
			font-weight: bold;
		}

		.address {
			margin-top: 24rpx;
			font-size: 28rpx;
			color: #999;
		}
	}

	.goods-section {
		margin-top: 20rpx;
		background: #fff;
		padding-bottom: 1px;

		.g-header {
			display: flex;
			align-items: center;
			height: 100rpx;
			padding: 0 30rpx;
			position: relative;
		}

		.logo {
			display: block;
			width: 50rpx;
			height: 50rpx;
			border-radius: 100px;
		}

		.name {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			margin-left: 24rpx;
		}

		.g-item {
			display: flex;
			margin: 0 30rpx;
			padding: 30rpx 0;
			border-bottom: 1rpx #f4f4f4 solid;

			image {
				flex-shrink: 0;
				width: 164rpx;
				height: 164rpx;
				border-radius: 8rpx;
			}

			.right {
				flex: 1;
				padding-left: 40rpx;
				overflow: hidden;
				display: flex;
				flex-direction: column;
			}

			.title {
				text-align: justify;
				font-size: 32rpx;
				color: #333;
			}

			.specBox {
				margin-top: 35rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #999;

				.spec {
					font-size: 28rpx;
					flex: 1;
				}

				.specVal {
					max-width: 400rpx;
					display: flex;
					align-items: center;

					.clamp {
						font-size: 28rpx;
					}

					.yticon {
						margin-top: 4rpx;
						max-width: 360rpx;
						margin-left: 10rpx;
						font-size: 24rpx;
					}
				}
			}

			.price-box {
				margin-top: 35rpx;
				align-items: baseline;
				display: flex;
				justify-content: space-between;
				position: relative;
			}

			.price {
				font-size: 40rpx;
				font-weight: bold;
				font-weight: 500;
				color: $mall-price;

				&:after {
					content: ' 点';
					font-size: 24rpx;
				}
			}

			.num {
				font-size: 24rpx;
				color: #999;
			}
		}

		.g-item:last-child {
			border: none;
		}
	}

	.yt-list {
		margin-top: 20rpx;
		background: #fff;
	}

	.desc-cell {
		.cell {
			.cell-tit {
				max-width: 90rpx;
			}

			.desc {
				flex: 1;
				font-size: 28rpx;
				color: #303133;
			}
		}
	}

	.yt-list-cell {
		padding: 10rpx 30rpx 10rpx 30rpx;
		position: relative;

		&.b-b:after {
			left: 30rpx;
		}

		.cell {
			line-height: 70rpx;
			display: flex;
			align-items: center;
		}

		.cell-tit {
			flex: 1;
			font-size: 28rpx;
			color: #666;
			margin-right: 10rpx;
		}

		.cell-tip {
			font-size: 28rpx;
			color: #666;
		}

		.label {
			line-height: 70rpx;
			display: flex;
			align-items: center;
			font-size: 23rpx;
			color: #FBCD31;

			.label-tit {
				flex: 1;
			}
		}
	}
	//余额抵扣
	.cellBox {
		padding: 30rpx;
		background: #fff;
	
		.cell {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 66rpx;
	
			.left {
				text {
					font-size: 22rpx;
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
				}
	
				image {
					width: 20rpx;
					height: 15rpx;
					margin: 0 4rpx;
				}
	
				text:nth-of-type(1) {
					font-size: 28rpx;
					font-weight: normal;
					margin-right: 10rpx;
				}
			}
	
			.right {
				image {
					width: 33rpx;
					height: 24rpx;
					margin-right: 6rpx;
				}
	
				.num {
					font-size: 26rpx;
					font-weight: bold;
					color: $theme-color;
				}
	
				.change {
					display: block;
					font-size: 24rpx;
					color: rgba(51, 51, 51, 1);
					width: 90rpx;
					height: 44rpx;
					line-height: 44rpx;
					border-radius: 22rpx;
					text-align: center;
					background-color: #e5e5e5;
				}
			}
	
			.switch {
				width: 50rpx;
				height: 50rpx;
			}
		}
		.label{
			margin-top: 30rpx;
			line-height: 36rpx;
			padding: 20rpx;
			width: 690rpx;
			box-sizing: border-box;
			background: #FAFAFA;
			border: 2px dashed #EEEEEE;
			border-radius: 4rpx;
			font-size: 24rpx;
			color: #999;
			text-align: justify;
		}
	}
	.box {
		background-color: #fff;
		position: relative;
		width: 600rpx;
		padding: 36rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
	
		image {
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			width: 26rpx;
			height: 26rpx;
			padding: 30rpx;
		}
	
		.title {
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
		}
	
		.content {
			.label {
				display: flex;
				justify-content: center;
				font-size: 28rpx;
				color: #333;
				margin-top: 46rpx;
				align-items: center;
	
				text:nth-of-type(2) {
					margin-left: 8rpx;
					font-weight: bold;
				}
			}
	
			.inputBox {
				position: relative;
				height: 114rpx;
				line-height: 114rpx;
				border-bottom: 1rpx solid #eee;
	
				text:nth-of-type(1) {
					font-size: 28rpx;
					position: absolute;
					top: 0;
					left: 0;
				}
	
				text:nth-of-type(2) {
					font-size: 28rpx;
					position: absolute;
					top: 0;
					right: 0;
				}
	
				input {
					height: 114rpx;
					text-align: right;
					padding-right: 58rpx;
					font-size: 56rpx;
				}
			}
	
			.boxbtn {
				margin: 40rpx 0 0;
				width: 528rpx;
				height: 80rpx;
				background: #FBC866;
				border-radius: 40rpx;
				color: #fff;
				line-height: 80rpx;
				text-align: center;
			}
		}
	
	}
	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 30rpx 30rpx 30rpx;
		padding: 30rpx 30rpx calc(30rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
		font-size: 40rpx;
		font-weight: 500;
		background-color: #fff;
		z-index: 9;
		color: #333;
		box-shadow: 0px -5rpx 4rpx 0px rgba(51, 51, 51, 0.05);

		.price-content {
			display: flex;
			flex-direction: column;
			.a{
				&::before {
					content: '需支付：';
					font-size: 32rpx;
					font-weight: 500;
				}
				&::after {
					content: ' 元';
					font-size: 24rpx;
					font-weight: 500;
				}
			}
			.b{
				font-size: 24rpx;
				color: #FBCD31;
			}
			
		}

		.submit {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #333;
			font-size: 32rpx;
			font-weight: 500;
			width: 250rpx;
			height: 80rpx;
			background: linear-gradient(90deg, #FBCC2B 0%, #FBDC72 100%);
			border-radius: 40rpx;
		}
	}

	/* 规格选择弹窗 */
	.attr-content {
		padding: 30rpx;
		box-sizing: border-box;

		.a-c {
			position: absolute;
			top: 150rpx;
			bottom: 210rpx;
			overflow-y: scroll;
		}

		.a-t {
			display: flex;

			image {
				width: 170rpx;
				height: 170rpx;
				flex-shrink: 0;
				margin-top: -70rpx;
				border-radius: 8rpx;
			}

			.right {
				display: flex;
				flex-direction: column;
				padding-left: 24rpx;
				font-size: 20rpx;
				color: #999;
				line-height: 30rpx;

				.price {
					line-height: 40rpx;
					font-weight: bold;
					font-size: $uni-font-size-lg;
					color: $mall-price;

					&:after {
						content: ' 点';
						font-size: 20rpx;
					}
				}
			}
		}

		.btn-box {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			border-top: 1px solid #eee;
			z-index: 99;
			height: 119rpx;
			display: flex;
			align-items: center;

			.btn {
				height: 76rpx;
				line-height: 76rpx;
				border-radius: 38rpx;
				background: $mall-price;
				font-size: 28rpx;
				color: #fff;
				width: 690rpx;
			}
		}

		.attr-list {
			padding-top: 30rpx;

			.specTitle {
				font-size: 28rpx;
				color: #999;
			}

			.itemBox {
				margin-top: 30rpx;
				display: flex;
				flex-wrap: wrap;

				.item {
					font-size: 24rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					color: #999;
					border: 1rpx solid #999;
					margin-right: 30rpx;
					padding: 0 30rpx;
					border-radius: 25rpx;
					margin-bottom: 30rpx;
				}

				.itemAct {
					background-color: $mall-price;
					border: 1rpx solid $mall-price;
					color: #fff;
				}
			}
		}

	}

	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			animation: hideLayer 0.2s linear both;

			.mask {
				animation: hideLayer 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			padding-bottom: env(safe-area-inset-bottom);
			width: 100%;
			height: 70vh;
			border-radius: 10rpx 10rpx 0 0;
			background-color: #fff;
		}

		@keyframes showPopup {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}

		@keyframes hidePopup {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}

			100% {
				transform: translateY(0%);
			}
		}

		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(120%);
			}
		}
	}
	/deep/ .z-modal-box .content{
		font-size: 30rpx!important;
	}
</style>
